Frontend Service Worker Navigáció: Oldalbetöltések Megszakítása a Javított Felhasználói Élményért

A Service Workerek egy hatékony technológia, amely lehetővé teszi a hálózati kérések megszakítását, az erőforrások gyorsítótárazását és az offline funkcionalitás biztosítását a webalkalmazások számára. Az egyik legjelentősebb képesség az oldalbetöltési kérések megszakítása, amely lehetővé teszi a teljesítmény és a felhasználói élmény drámai javítását. Ez a bejegyzés bemutatja, hogyan kezelik a Service Workerek a navigációs kéréseket, gyakorlati példákkal és hasznos meglátásokkal szolgálva a fejlesztők számára.

A Navigációs Kérések Értelmezése

Mielőtt belemerülnénk a kódba, definiáljuk, hogy mi a "navigációs kérés" a Service Workerek kontextusában. A navigációs kérés egy olyan kérés, amelyet a felhasználó kezdeményez egy új oldalra navigálva vagy a jelenlegi oldal frissítésével. Ezeket a kéréseket általában a következők váltják ki:

• Egy linkre kattintás (<a> tag)
• Egy URL beírása a címsorba
• Az oldal frissítése
• A böngésző vissza vagy előre gombjainak használata

A Service Workerek képesek megszakítani ezeket a navigációs kéréseket, és meghatározni, hogyan kezeljék őket. Ez lehetőséget nyit kifinomult gyorsítótárazási stratégiák megvalósítására, a tartalom gyorsítótárból való kiszolgálására, amikor a felhasználó offline, és akár oldalak dinamikus generálására is az ügyfél oldalon.

Service Worker Regisztrálása

Az első lépés egy Service Worker regisztrálása. Ezt általában a fő JavaScript fájlban végezzük el:

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

            

              
                Copy
              
            
          

Ez a kód ellenőrzi, hogy a böngésző támogatja-e a Service Workereket, és ha igen, regisztrálja a /service-worker.js fájlt. Győződjön meg arról, hogy ez a JavaScript biztonságos környezetben (HTTPS) fut a termelési környezetekben.

Navigációs Kérések Megszakítása a Service Workerben

A service-worker.js fájlban figyelheti a fetch eseményt. Ez az esemény minden hálózati kérésre aktiválódik, amelyet az alkalmazás indít, beleértve a navigációs kéréseket is. Szűrhetjük ezeket a kéréseket, hogy kifejezetten a navigációs kéréseket kezeljük.

            
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(async () => {
      try {
        // First, try to use the navigation preload response if it's supported.
        const preloadResponse = await event.preloadResponse;
        if (preloadResponse) {
          return preloadResponse;
        }

        // Always try the network first.
        const networkResponse = await fetch(event.request);
        return networkResponse;
      } catch (error) {
        // catch is only triggered if an exception is thrown, which is likely
        // due to a network error.
        // If fetching the HTML file fails, look for a fallback.
        console.log('Fetch failed; returning offline page instead.', error);

        const cache = await caches.open(CACHE_NAME);
        const cachedResponse = await cache.match(OFFLINE_URL);
        return cachedResponse || createErrorResponse(); // Fallback if offline page unavailable
      }
    });
  }
});

            

              
                Copy
              
            
          

Bontsuk le ezt a kódot:

• event.request.mode === 'navigate': Ez a feltétel ellenőrzi, hogy a kérés navigációs kérés-e.
• event.respondWith(): Ez a módszer megmondja a böngészőnek, hogyan kezelje a kérést. Egy ígéretet fogad el, amely egy Response objektumra oldódik fel.
• event.preloadResponse: Ez egy Navigation Preload nevű mechanizmus. Ha engedélyezve van, lehetővé teszi a böngésző számára, hogy a navigációs kérés lekérését a Service Worker teljes aktiválása előtt megkezdje. Gyorsulást biztosít azáltal, hogy átfedi a Service Worker indítási idejét a hálózati kéréssel.
• fetch(event.request): Ez lekéri az erőforrást a hálózatról. Ha a hálózat elérhető, az oldal a szokásos módon a szerverről töltődik be.
• caches.open(CACHE_NAME): Ez megnyit egy gyorsítótárat a megadott névvel (a CACHE_NAME-t máshol kell definiálni a Service Worker fájlban).
• cache.match(OFFLINE_URL): Ez megkeres egy gyorsítótárazott választ, amely megfelel az OFFLINE_URL-nek (pl. egy offline oldal).
• createErrorResponse(): Ez egy egyéni függvény, amely egy hiba választ ad vissza. Testreszabhatja ezt a függvényt, hogy felhasználóbarát offline élményt nyújtson.

Gyorsítótárazási Stratégiák Navigációs Kérésekhez

Az előző példa egy alapvető hálózat-első stratégiát mutat be. Azonban kifinomultabb gyorsítótárazási stratégiákat is megvalósíthat az alkalmazás követelményeitől függően.

Hálózat Először, Visszaesés a Gyorsítótárra

Ez az előző példában bemutatott stratégia. Először megpróbálja lekérni az erőforrást a hálózatról. Ha a hálózati kérés sikertelen (pl. a felhasználó offline), akkor visszaesik a gyorsítótárra. Ez egy jó stratégia a gyakran frissített tartalomhoz.

Gyorsítótár Először, Háttérben Frissítés

Ez a stratégia először a gyorsítótárat ellenőrzi. Ha az erőforrás megtalálható a gyorsítótárban, azonnal visszaadja. A háttérben a Service Worker frissíti a gyorsítótárat az erőforrás legújabb verziójával a hálózatról. Ez gyors kezdeti betöltést biztosít, és biztosítja, hogy a felhasználó végül mindig a legfrissebb tartalommal rendelkezzen.

            
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.match(event.request)
        .then(cachedResponse => {
          if (cachedResponse) {
            // Update the cache in the background.
            event.waitUntil(
              fetch(event.request).then(response => {
                return caches.open(CACHE_NAME).then(cache => {
                  return cache.put(event.request, response.clone());
                });
              })
            );
            return cachedResponse;
          }

          // If not found in cache, fetch from network.
          return fetch(event.request);
        })
    );
  }
});

            

              
                Copy
              
            
          

Csak Gyorsítótár

Ez a stratégia csak a gyorsítótárból szolgálja ki a tartalmat. Ha az erőforrás nem található a gyorsítótárban, a kérés sikertelen. Ez olyan eszközökhez alkalmas, amelyekről ismert, hogy statikusak és offline is elérhetők.

Stale-While-Revalidate

Hasonló a Gyorsítótár Előszörhöz, de a event.waitUntil háttérben történő frissítés helyett azonnal visszaadja a gyorsítótárazott választ (ha van), és *mindig* megpróbálja lekérni a legújabb verziót a hálózatról, és frissíteni a gyorsítótárat. Ez a megközelítés nagyon gyors kezdeti betöltést biztosít, mivel a felhasználó azonnal megkapja a gyorsítótárazott verziót, de garantálja, hogy a gyorsítótár végül a legfrissebb adatokkal frissül, készen állva a következő kérésre. Ez kiválóan alkalmas nem kritikus erőforrásokhoz vagy olyan helyzetekhez, amikor a kissé elavult információk rövid megjelenítése elfogadható a sebességért cserébe.

            
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.open(CACHE_NAME).then(cache => {
        return cache.match(event.request).then(cachedResponse => {
          const fetchedResponse = fetch(event.request).then(networkResponse => {
            cache.put(event.request, networkResponse.clone());

            return networkResponse;
          });

          // Return the cached response if we have it, otherwise wait
          // for the network. 
          return cachedResponse || fetchedResponse;
        });
      })
    );
  }
});

            

              
                Copy
              
            
          

Navigáció Előbetöltése

A Navigation Preload egy olyan funkció, amely lehetővé teszi a böngésző számára, hogy az erőforrás lekérését a Service Worker teljes aktiválása előtt megkezdje. Ez jelentősen javíthatja a navigációs kérések teljesítményét, különösen a webhely első látogatásakor.

A Navigation Preload engedélyezéséhez a következőkre van szükség:

1. Engedélyezze a Service Worker activate eseményében.
2. Ellenőrizze a preloadResponse-t a fetch eseményben.

            
// In the activate event:
self.addEventListener('activate', event => {
  event.waitUntil(self.registration.navigationPreload.enable());
});

// In the fetch event (as shown in the initial example):
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(async () => {
      const preloadResponse = await event.preloadResponse;
      if (preloadResponse) {
        return preloadResponse;
      }

      // ... rest of your fetch logic ...
    });
  }
});

            

              
                Copy
              
            
          

Offline Helyzetek Kezelése

A Service Workerek használatának egyik fő előnye az offline funkcionalitás biztosításának lehetősége. Amikor a felhasználó offline, kiszolgálhatja az alkalmazás gyorsítótárazott verzióját, vagy megjeleníthet egy egyéni offline oldalt.

Az offline helyzetek kezeléséhez a következőkre van szükség:

1. Gyorsítótárazza a szükséges eszközöket, beleértve a HTML-t, CSS-t, JavaScriptet és képeket.
2. A fetch eseményben fogjon el minden hálózati hibát, és szolgálja ki a gyorsítótárazott offline oldalt.

            
// Define the offline page URL and cache name
const OFFLINE_URL = '/offline.html';
const CACHE_NAME = 'my-app-cache-v1';

// Install event: cache static assets
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/style.css',
        '/app.js',
        OFFLINE_URL // Cache the offline page
      ]);
    })
  );
  self.skipWaiting(); // Immediately activate the service worker
});

// Fetch event: handle navigation requests and offline fallback
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(async () => {
      try {
        // First, try to use the navigation preload response if it's supported.
        const preloadResponse = await event.preloadResponse;
        if (preloadResponse) {
          return preloadResponse;
        }

        // Always try the network first.
        const networkResponse = await fetch(event.request);
        return networkResponse;
      } catch (error) {
        // catch is only triggered if an exception is thrown, which is likely
        // due to a network error.
        // If fetching the HTML file fails, look for a fallback.
        console.log('Fetch failed; returning offline page instead.', error);

        const cache = await caches.open(CACHE_NAME);
        const cachedResponse = await cache.match(OFFLINE_URL);
        return cachedResponse || createErrorResponse(); // Fallback if offline page unavailable
      }
    });
  }
});

function createErrorResponse() {
    return new Response(
        `
Offline
You are currently offline. Please check your internet connection.
`, {
            headers: { 'Content-Type': 'text/html' }
        }
    );
}

            

              
                Copy
              
            
          

Ez a kód gyorsítótáraz egy offline.html oldalt az install esemény során. Aztán a fetch eseményben, ha a hálózati kérés sikertelen (a catch blokk végrehajtódik), ellenőrzi a gyorsítótárat az offline.html oldalra, és visszaadja azt a böngészőnek.

Haladó Technikák és Megfontolások

A Cache Storage API Közvetlen Használata

A caches objektum egy hatékony API-t biztosít a gyorsítótárazott válaszok kezeléséhez. Használhat olyan módszereket, mint a cache.put(), cache.match() és cache.delete() a gyorsítótár közvetlen manipulálásához. Ez finom irányítást biztosít az erőforrások gyorsítótárazásának és lekérésének módja felett.

Dinamikus Gyorsítótárazás

A statikus eszközök gyorsítótárazása mellett dinamikus tartalmakat is gyorsítótárazhat, például API válaszokat. Ez jelentősen javíthatja az alkalmazás teljesítményét, különösen a lassú vagy megbízhatatlan internetkapcsolattal rendelkező felhasználók számára.

Gyorsítótár Verziózása

Fontos, hogy verziózza a gyorsítótárat, hogy frissíthesse a gyorsítótárazott erőforrásokat, amikor az alkalmazás megváltozik. Egy gyakori megközelítés a verziószám belefoglalása a CACHE_NAME-be. Amikor frissíti az alkalmazást, növelheti a verziószámot, ami arra kényszeríti a böngészőt, hogy letöltse az új erőforrásokat.

            
const CACHE_NAME = 'my-app-cache-v2'; // Increment the version number

            

              
                Copy
              
            
          

El kell távolítania a régi gyorsítótárakat is, hogy megakadályozza azok felhalmozódását és a tárhely pazarlását. Ezt megteheti az activate eseményben.

            
self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

            

              
                Copy
              
            
          

Háttérszinkronizálás

A Service Workerek a Háttérszinkronizálási API-t is biztosítják, amely lehetővé teszi a feladatok elhalasztását, amíg a felhasználó stabil internetkapcsolattal nem rendelkezik. Ez olyan esetekben hasznos, mint például űrlapok beküldése vagy fájlok feltöltése, amikor a felhasználó offline van.

Push Értesítések

A Service Workereket push értesítések megvalósítására is fel lehet használni, amelyek lehetővé teszik, hogy üzeneteket küldjön a felhasználóknak akkor is, ha éppen nem használják aktívan az alkalmazást. Ez felhasználható arra, hogy értesítse a felhasználókat az új tartalmakról, frissítésekről vagy fontos eseményekről.

Nemzetköziesítési (i18n) és Honosítási (L10n) Megfontolások

Amikor Service Workereket valósít meg egy globális alkalmazásban, kulcsfontosságú a nemzetköziesítés (i18n) és a honosítás (L10n) figyelembe vétele. Íme néhány kulcsfontosságú szempont:

• Nyelvfelismerés: Valósítson meg egy mechanizmust a felhasználó által preferált nyelv felismerésére. Ez magában foglalhatja az Accept-Language HTTP fejlécet, egy felhasználói beállítást vagy böngésző API-kat.
• Honosított Tartalom: Tárolja az offline oldalak és más gyorsítótárazott tartalmak honosított verzióit. Használja a felismert nyelvet a megfelelő verzió kiszolgálásához. Például lehetnek külön offline oldalai az angol (/offline.en.html), a spanyol (/offline.es.html) és a francia (/offline.fr.html) számára. A Service Worker ezután dinamikusan kiválasztja a megfelelő fájlt a gyorsítótárazáshoz és a kiszolgáláshoz a felhasználó nyelve alapján.
• Dátum- és Időformázás: Győződjön meg arról, hogy az offline oldalakon megjelenő dátumok és időpontok a felhasználó területi beállításának megfelelően vannak formázva. Használja a JavaScript Intl API-ját erre a célra.
• Pénznemformázás: Ha az alkalmazás pénznemértékeket jelenít meg, formázza azokat a felhasználó területi beállításának és pénznemének megfelelően. Ismét használja az Intl API-t a pénznem formázásához.
• Szövegirány: Vegye figyelembe a jobbról balra (RTL) olvasott nyelveket, mint például az arab és a héber. Az offline oldalaknak és a gyorsítótárazott tartalmaknak támogatniuk kell az RTL szövegirányt CSS használatával.
• Erőforrásbetöltés: Dinamikusan töltse be a honosított erőforrásokat (pl. képeket, betűtípusokat) a felhasználó nyelve alapján.

Példa: Honosított Offline Oldal Kiválasztása

            
// Function to get the user's preferred language
function getPreferredLanguage() {
  // This is a simplified example.  In a real application,
  // you would use a more robust language detection mechanism.
  return navigator.language || navigator.userLanguage || 'en';
}

// Define a mapping of languages to offline page URLs
const offlinePageUrls = {
  'en': '/offline.en.html',
  'es': '/offline.es.html',
  'fr': '/offline.fr.html'
};

// Get the user's preferred language
const preferredLanguage = getPreferredLanguage();

// Determine the offline page URL based on the preferred language
let offlineUrl = offlinePageUrls[preferredLanguage] || offlinePageUrls['en']; // Default to English if no match

// ... rest of your service worker code, using offlineUrl to cache and serve the appropriate offline page ...

            

              
                Copy
              
            
          

Tesztelés és Hibakeresés

• Használja a Chrome DevTools-t: A Chrome DevTools egy dedikált panelt biztosít a Service Workerek vizsgálatához. Ezzel a panellel megtekintheti a Service Worker állapotát, megvizsgálhatja a gyorsítótárazott erőforrásokat és hibakeresést végezhet a hálózati kérésekben.
• Használja a Service Worker frissítését Újratöltéskor: A Chrome DevTools -> Alkalmazás -> Service Workerek menüpontban bejelölheti a "Frissítés újratöltéskor" jelölőnégyzetet, hogy a service worker minden oldal újratöltésekor frissüljön. Ez rendkívül hasznos a fejlesztés során.
• Tárhely Törlése: Néha a Service Worker rossz állapotba kerülhet. A böngésző tárhelyének (beleértve a gyorsítótárat is) törlése segíthet megoldani ezeket a problémákat.
• Használjon Service Worker tesztelő könyvtárat: Számos könyvtár áll rendelkezésre, amelyek segíthetnek a Service Workerek tesztelésében, például a Workbox.
• Tesztelje Valódi Eszközökön: Bár a Service Workereket tesztelheti asztali böngészőben, fontos, hogy valódi mobileszközökön is tesztelje, hogy megbizonyosodjon arról, hogy különböző hálózati körülmények között is megfelelően működnek.

Következtetés

Ez az útmutató szilárd alapot biztosít a Service Worker navigációs megszakításának megértéséhez és megvalósításához. Ahogy tovább fedezi fel ezt a technológiát, még több módot fog felfedezni arra, hogyan használhatja ki a képességeit a kivételes webes élmények létrehozásához.